<template>
	<view style="position:relative;border-radius:20rpx 20rpx 0 0">
		<su-tabs borderNode itemStyle="height:40px" :list="state.classList" lineColor="#296DDD" activeStyle="color:#333;font-size:32rpx;line-height:1" inactiveStyle="color:#9E9E9E;font-size:30rpx;line-height:1" @change="tagsChange"/>
		<c-group-card :data="item" v-for="item in state.list" :key="item.id" />
		<uni-load-more v-if="state.list.length > 0" :status="state.more" :content-text="{
			contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length == 0"
			:icon="sheep.$url.cdn('/mengchong/soldout-empty.png')" text="暂无数据">
		</s-empty>
	</view>
</template>

<script setup>
	import {onMounted,reactive,ref,inject,computed,watch,onUnmounted} from 'vue';
	import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import communityList from "@/components/s-community-list-two.vue"
	import cGroupCard from "./c-group-card.vue"
	import merchantApi from '@/sheep/api/merchant';
	import sheep from '@/sheep';
	
	const location = sheep.$store('location')
	const position = computed(()=>location.myPosition)
	const props = defineProps({
	  data:{
	  	type:Object,
	  	default:()=>({})
	  }
	});
	watch(()=>location.myPosition ,(data)=>{
		console.log('newdata',data)
		resetList()
	})
	//页面数据
	const state = reactive({
		more:'',
		status:'',
		pages:0,
		list:[],
		classList:[],
		tag_name:'',
		lng: position.value.longitude,
		lat: position.value.latitude,
	})
	

	
	onMounted(async ()=>{
		await getTagList()
		loadmore()
	})
	onReachBottom(()=>{
		loadmore()
	})
	function resetList(){
		state.more = 'more'
		state.pages=0
		state.list=[]
		loadmore()
	}
	//上拉加载
	const loadmore = () => {
		if(state.more == 'noMore')return uni.showToast({
			title:'没有更多了',
			icon:'none'
		})
		getList()
	}
	/**
	 * 获取标签列表
	 */
	async function getTagList(){
		let {data ,error} = await merchantApi.getCategoryList()
		if(error == 0){
			state.classList  = data
			state.classList.unshift({
				id: '', name: "推荐", icon: null
			})
		}
	}
	async function getList(){
		state.more = 'loading'
		let { error,data} = await merchantApi.merchantList({
			keyword:state.tag_name,
			lng: position.value.longitude,
			lat: position.value.latitude,
			page:state.pages + 1,
			list_rows: 8
		})
		if(error == 0){
			state.more = data.data.length ==data.per_page?  'more' : 'noMore'
			state.pages = data.current_page
			state.list.push(...data.data.filter(g=>g.indexGoods.length))
		}
	}
	function tagsChange(e){
		state.tag_name = e.name == '推荐' ? '': e.name
		resetList()
	}

	
</script>

<style lang="scss" scoped>
.bg_white{
	background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 8%, #FFFFFF 10%);
}
.w-100{
	width:100%;
}

// 之前那个类名 会有一个伪元素改变样式
.b_green{
	background:var(--ui-BG-5)!important;
}
	.goods-list-box {
		width: 50%;
		box-sizing: border-box;

		.left-list {
			&:nth-last-child(1) {
				margin-bottom: 0 !important;
			}
		}

		.right-list {
			&:nth-last-child(1) {
				margin-bottom: 0 !important;
			}
		}
	}
.color_green{
	color:$white!important;
}
.active{
		color:#F46800 !important;
		background: #FFF8F3 !important;
		border:solid 1rpx #F46800 !important;
}



.content{
	position:relative;
	width: calc(100vw);
	font-family: PingFang SC;
	
	.tabs{
		height:50rpx;
		border-radius:20rpx 20rpx 0 0;
		position:relative;
		z-index:2;
		.tabs-item{
			height:80rpx;
			width:200rpx;
			font-size: 36rpx;
			font-weight: 600;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: -1rpx;
		}
		.bgImg{
			background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/img/index-tab-act-jy.png');
			background-size: 48rpx 48rpx;
			background-position: center;
			background-repeat: no-repeat;
			background-position: center -0rpx;
		}
	}
	
}

.more{
	position: absolute;
	right: 0rpx;
	top:36rpx;
	z-index:8;
	
	width:180rpx;
	height:48rpx;
	
	display:flex;
	justify-content: flex-end;
	align-items: center;
	
	font-family: PingFang SC;
	font-size: 32rpx;
	font-weight: normal;
	text-align: center;
	letter-spacing: 1rpx;

	color: rgb(241, 166, 89);

	
}

.single-line{
	white-space: nowrap;
	overflow: hidden;          
	text-overflow: ellipsis;
}

.scroll{
	white-space: nowrap;
	width: 100%;
	height:72rpx;
	.item{
		display: inline-block;
		height:48rpx;
		line-height:48rpx;
		padding:0 18rpx;
		border-radius: 16rpx;
		background: white;
		
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		letter-spacing: -0.04em;
		box-shadow: 0 0 10rpx 2rpx rgba(0,0,0,0.08);
		margin-right:12rpx;
		margin-top:2rpx;
		color:#747474
	}
}

.color_red{
	color:#E82D2D
}

.color_3d{
	color:#3D3D3D;
}
.blank_10{
	width:100%;
	height:10rpx;
	background:#F6F6F6
}

</style>